<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/elementui.css">
    <style >
        .text {
            font-size: 12px;
        }

        .item {
            margin-bottom: 10px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-tag type="success">这个是哈罗抢单软件</el-tag>
    <el-form style="margin-top: 10px" :rules="rules" ref="form" label-position="top" :model="form" label-width="80px" size="mini">
        <el-form-item label="卡密" prop="cardNo">
            <el-input v-model="form.cardNo"></el-input>
        </el-form-item>
        <!--<el-form-item label="手机号码" prop="name">
            <el-input v-model="form.iPhone"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="name">
            <el-input v-model="form.code"></el-input>
            <el-button type="primary" @click="codeFunction">下发验证码</el-button>
        </el-form-item>-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>配置程序执行参数</span>
            </div>
            <div class="text item">
                <el-form-item label="距你几公里内（超出范围不接客）">
                    <el-input v-model="form.range" @change="submitForm"></el-input>
                </el-form-item>
                <el-form-item label="打车">
                    <el-switch v-model="form.dache" active-text="启用" inactive-text="关闭" style="display: block" active-color="#13ce66" size="medium" @change="submitForm"></el-switch>
                </el-form-item>
                <el-form-item label="独享">
                    <el-switch v-model="form.duxiang" active-text="启用" inactive-text="关闭" style="display: block" active-color="#13ce66" size="medium" @change="submitForm"></el-switch>
                </el-form-item>

                <el-form-item label="最小金额">
                    <el-input v-model="form.srcPrcMin" @change="submitForm"></el-input>
                </el-form-item>
                <el-form-item label="最大金额">
                    <el-input v-model="form.srcPrcMax" @change="submitForm"></el-input>
                </el-form-item>
            </div>
        </el-card>
        <!--<el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex" size="medium">
                <el-radio border label="男"></el-radio>
                <el-radio border label="女"></el-radio>
            </el-radio-group>
        </el-form-item>-->


        <el-form-item size="large">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button type="primary" @click="runScript">运行脚本</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="/htmljs/vue2.7.16.js"></script>
<!-- import JavaScript -->
<script src="/htmljs/elementui2.15.14.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                form: {
                    iPhone: '',
                    cardNo: '1212',
                    code: '',
                    dache:false,
                    duxiang:false,
                    srcPrcMax:999,
                    srcPrcMin:5,
                    range:3,
                },
                rules: {
                    /*iPhone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                    ],
                    cardNo: [
                        {required: true, message: '请输入卡密', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ],*/
                }
            }
        },
        created() {
            this.resetValue()
        },
        methods: {
            resetValue() {
                let json = window.ec.getConfig("form_json");
                if (json) {
                    json = JSON.parse(json)
                    this.form = this.copyNonNullProperties(json, this.form);
                }
            },
            copyNonNullProperties(source, target) {
                // 确保target是一个对象
                target = target || {};
                // 遍历source对象的所有属性
                for (let key in source) {
                    if (source.hasOwnProperty(key)) {
                        let value = source[key];
                        // 检查属性值是否为真值
                        if (value) {
                            target[key] = value;
                        }
                    }
                }
                return target;
            },
            save() {
                let d = window.ec.call('customFunction', this.form.cardNo);
                if (d > 0) {
                    window.ec.saveConfig("form_json", JSON.stringify(this.form));
                    this.$notify.info({
                        title: '消息',
                        duration: 2000,
                        message: '保存参数成功'
                    });
                } else {
                    window.ec.toast("激活失败");
                }
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.save();
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '参数不完整'
                        });
                        return false;
                    }
                });
            },
            runScript() {
                this.submitForm();
                window.ec.start()
            },
        }
    })
</script>
</html>